<template>
  <!-- <vxe-toolbar ref="toolbarRef" custom @click="handleTableConfigClick" style="margin-right: 5px;"></vxe-toolbar> -->
  <customTableConfig />

  <vxe-table
    ref="tableRef"
    :data="tableData"
    :custom-config="customConfig"
    stripe
    @edit-closed="handleEditClosed"
    @cell-dblclick="handleCellDbclick"
    :checkbox-config="{ highlight: true }"
  >
    <!-- <CustomTableItem v-for="col in columns" :key="col.field" :field="col.field" :title="col.title"
      :sortable="col.sortable" :width="col.width" :editRender="col.editRender" :listItemType="col.listItemType"/> -->
    <vxe-column type="checkbox" width="60" />
    <vxe-column
      v-for="col in columns"
      :key="col.field"
      :field="col.field"
      :title="col.fieldName"
      :sortable="col.sortable"
      :width="col.width"
      :align="col.align"
      :listItemType="col.listItemType"
      :edit-render="col.editRender"
    >
      <template #default="{ row }">
        <!-- 默认展示 -->
        <span v-if="!col.ifEnum">{{ row[col.field] }}</span>
        <!-- 枚举 -->
        <el-tag v-if="col.ifEnum" :type="findEnumClassType(col.enumData, row[col.field])">
          {{ findEnumName(col.enumData, row[col.field]) }}
        </el-tag>
      </template>
      <!-- 编辑状态 -->
      <template #edit="{ row }">
        <vxe-number-input v-if="col.listItemType == '2-2'" v-model="row[col.field]" />
      </template>
    </vxe-column>
  </vxe-table>
</template>

<script lang="ts" setup>
/**
 * 1-默认
 * 2-1 输入框 文本
 * 2-2 输入框 数字
 * 3   下拉框
 * 4   枚举
 */
import { ref, reactive, computed, defineProps, defineEmits, toRefs } from "vue"
import CustomTableConfig from "./CustomTableConfig.vue"
import type { VxeTablePropTypes, VxeToolbarInstance, VxeTableInstance } from "vxe-table"

// 1. 定义组件的 props
const props = defineProps({
  tableData: {
    type: Array as () => Array<Record<string, any>>,
    default: () => []
  },
  columns: {
    type: Array as () => Array<{
      field: string
      fieldName: string
      width?: number
      align?: string
      sortable?: boolean
      filterable?: boolean
      ifEnum?: boolean
      enumData?: any
      editRender?: any
      listItemType: string
    }>,
    default: () => []
  },
  height: {
    type: [String, Number],
    default: "auto"
  },
  showFooter: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  scrollY: {
    type: Object,
    default: () => ({})
  },
  pagination: {
    type: Object as () => { pageSize: number; currentPage: number },
    default: () => ({ pageSize: 10, currentPage: 1 })
  },
  size: {
    type: String as () => "small" | "medium" | "large",
    default: "medium"
  },
  highlightCurrentRow: {
    type: Boolean,
    default: false
  },
  border: {
    type: Boolean,
    default: true
  },
  stripe: {
    type: Boolean,
    default: true
  },
  sortConfig: {
    type: Object,
    default: () => ({ multiple: true, trigger: "cell" })
  },
  filterConfig: {
    type: Object,
    default: () => ({ filterMethod: () => true })
  }
})

// 2. 定义事件
const emit = defineEmits(["update:sort", "update:pagination", "cell-click", "cell-dblclick"])

// 3. 解构 props
const { tableData, columns, pagination, sortConfig, filterConfig } = toRefs(props)

// 4. 响应式状态
const paginationState = reactive({
  currentPage: pagination.value.currentPage,
  pageSize: pagination.value.pageSize
})

// 5. 计算属性：处理列的配置
const processedColumns = computed(() => {
  return columns.value.map((col) => ({
    ...col,
    sortable: col.sortable ?? false,
    filterable: col.filterable ?? false
  }))
})

interface EnumItem {
  value: string | number
  label: string
  classType: string
}
const findEnumName = (enumData: EnumItem[], value: string | number): string => {
  // 遍历 enumData，找到匹配项就返回对应的 label
  const enumItem = enumData.find((item) => String(item.value) === String(value))
  return enumItem ? enumItem.label : "未知类型"
}

const findEnumClassType = (enumData: EnumItem[], value: string | number): string => {
  // 遍历 enumData，找到匹配项就返回对应的 label
  const enumItem = enumData.find((item) => String(item.value) === String(value))
  return enumItem ? enumItem.classType : "primary"
}

// 单元格双击
const handleTableConfigClick = () => {
  console.log("打开表单配置")
}

// 单元格双击
const handleCellDbclick = (row: any) => {
  console.log("行双击", row)
  // emit('cell-click', params);
}

// 分页变化
const handlePaginationChange = (pagination: { pageSize: number; currentPage: number }) => {
  paginationState.currentPage = pagination.currentPage
  paginationState.pageSize = pagination.pageSize
  emit("update:pagination", paginationState)
}

const customConfig = reactive<VxeTablePropTypes.CustomConfig>({
  mode: "modal"
})

// 处理清除编辑状态
const handleEditClosed = (data: any) => {
  console.log(data.row)
}
// watch分页状态变化
import { watch } from "vue"

watch(paginationState, (newVal) => {
  emit("update:pagination", newVal)
})
</script>

<style scoped>
/* 自定义样式 */
</style>
